<template>
  <!-- 素材包详情 -->
  <div class="material-pack-list">
    <div class="top">
      <span>{{ package_name }}</span><span class="gray">{{ type }}</span>
    </div>
    <div class="content">
      <p class="title">{{ package_name }}素材数量：<span class="green-text">{{ list.length }}个</span></p>
      <div class="list">
        <div class="item" 
          @click="itemClick(index)"
          v-for="(item, index) in list" 
          :key="index">
          <div 
            class="img-wrapper" 
            :style="{backgroundImage: 'url(' + item.cover_url + ')'}">
          </div>
          <p class="name">{{ item.material_name }}</p>
        </div>
      </div>
    </div>

    <div class="detail-dialog" v-if="showDialog">
      <div 
        @click="closeVideoDialog"
        class="dialog-content" 
        >
        <div class="dialog-top">
          <img src="@/assets/image/dialog-back.png" alt="" class="back"/>
          <span class="dialog-title">素材预览</span>
        </div>
        <video :src="currentInfo.video_url" class="preview-video" ref="video"></video>
        <img 
          @click.stop="playVideo"
          v-if="!isPlaying"
          src="@/assets/image/play-media-btn.png" alt="" 
          class="dialog-play-btn"/>
      </div>
    </div>
  </div>
</template>

<script>
import { listMaterialContent } from '@/api/account'
import { getOssDomain } from '@/api/oss'

export default {
  data () {
    return {
      showDialog: false,
      list: [],
      currentInfo: null,
      oss_domain: '',
      isPlaying: false,
    }
  },
  computed: {
    type () {
      return this.$route.query.type
    },
    package_name () {
      return this.$route.query.package_name
    },
    role () {
      return sessionStorage.getItem('role')
    }
  },
  async mounted () {
    if (!sessionStorage.getItem('oss_domain')) {
      const res = await getOssDomain()
      sessionStorage.setItem('oss_domain', res.domain)
      this.oss_domain = res.domain
    } else {
      this.oss_domain = sessionStorage.getItem('oss_domain')
    }
    this.getDetail()
  },
  methods: {
    closeVideoDialog () {
      this.showDialog = false
      this.isPlaying = false
    },
    playVideo () {
      this.$refs.video.play()
      this.isPlaying = true
    },
    getDetail () {
      listMaterialContent({
        package_id: this.$route.query.package_id
      }).then(res => {
        res.list = res.list || []
        // res.list.push({})
        // res.list.push({})
        // res.list.forEach(item => {
        //   // item.material_name = '啊啦拒收到付垃圾啊是啦大姐夫阿拉斯加代发拉了世纪东方啊'
        //   // item.cover_url = `${this.oss_domain}/cpms/image/f815044719ef43b185b7f6ce460cc622.jpg`
        //   // item.video_url = `${this.oss_domain}/cpms/video/47e883c11e8549e2bef4fc972ffcf405.mp4`
        //   item.cover_url = `${this.oss_domain}/${item.cover_url}`
        //   item.video_url = `${this.oss_domain}/${item.video_url}`
        // })
        this.list = res.list
      })
    },
    itemClick (index) {
      this.showDialog = true
      this.currentInfo = this.list[index]
    }
  }
}
</script>

<style scoped>
.item {
  margin-bottom: 4.27vw;
}
.preview-video {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
}
.dialog-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20.27vw;
  height: 20.27vw;
  z-index: 10;
}
.material-pack-list {
  padding-bottom: 25.33vw;
}

.dialog-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20.27vw;
  height: 20.27vw;
  z-index: 10;
}
.dialog-title {
  position: absolute;
  top: 3.2vw;
  left: 50%;
  transform: translateX(-50%);
  font-family: Source Sans Pro;
  font-size: 3.73vw;
  font-weight: 600;
  color: #FFFFFF;
}
.detail-dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  border-radius: 2.13vw;
  background: rgba(0, 0, 0, 0.3);
}
.dialog-content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 79.47vw;
  height: 147.73vw;
  background-color: #fff;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 2.13vw;
  overflow: hidden;
}
.back {
  position: absolute;
  left: 6.4vw;
  top: 4.8vw;
  width: 2.67vw;
  height: 2.67vw;
}
.dialog-top {
  position: relative;
  height: 16vw;
  background: linear-gradient(180deg, rgba(0,0,0,0.60) 0%, rgba(0,0,0,0.00) 100%);
  z-index: 1000;
}


.top {
  margin: 0 auto 5.33vw;
  box-sizing: border-box;
  padding-left: 3.2vw;
  width: 89.6vw;
  height: 17.6vw;
  background: #ffffff;
  display: flex;
  align-items: center;
  font-family: Source Sans Pro;
  font-size: 3.73vw;
  font-weight: bold;
  color: #3D3D3D;
  border-radius: 2.13vw;
}
.gray {
  margin-left: 1.33vw;
  color: #999;
}
.material-pack-list {
  padding-top: 5.33vw;
}
.list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-bottom: 4vw;
}
.img-wrapper {
  width: 36vw;
  height: 53.33vw;
  margin-bottom: 2.13vw;
  background-color: #ffffff;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 2.13vw;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.06);
}
.name {
  width: 36vw;
  font-family: Source Sans Pro;
  font-size: 3.73vw;
  font-weight: 600;
  line-height: 22px;
  color: #666666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.content {
  box-sizing: border-box;
  width: 89.6vw;
  box-sizing: border-box;
  padding: 3.73vw 5.33vw 0;
  background: #ffffff;
  margin: 0 auto;
  border-radius: 2.13vw;
}
.title {
  margin-bottom: 5.87vw;
  font-family: Source Sans Pro;
  font-size: 3.73vw;
  font-weight: 600;
  line-height: 5.87vw;
  color: #3D3D3D;
}
.green-text {
  color: #00A5A6;
}
</style>